<template>
    <div class="topWrapper">
        <el-select v-model="searchOption" class="m-2 searchSel" placeholder="点击选择" size="large">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        <el-input
        v-model="searchInput"
        class="searchinput"
        placeholder="在此输入"
        :prefix-icon="Search"
      />
        <div class="dropDown">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                 <i class="iconfont icon-caidan dd"></i>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="first">首页</el-dropdown-item>
                    <el-dropdown-item command="warehouse">库存管理</el-dropdown-item>
                    <el-dropdown-item command="order">订单管理</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                    <el-dropdown-item divided command="set">设置</el-dropdown-item>
                    <el-dropdown-item command="chat">联系我们</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="联系我们"
        width="88%"
        >
        <span>邮箱：1124026912@qq.com</span>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
            >确定</el-button
            >
        </span>
        </template>
    </el-dialog>
</template>


<script lang='ts'>
import { ref } from 'vue-demi'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'
import { useStore } from 'vuex'


export default {
    setup(){
        let store = useStore();
        const searchOption = ref('')
        const searchInput = ref('')
        let dialogVisible = ref(false)
        const options = [
                {
                    value: 'option1',
                    label: '搜索库存',
                },
                {
                    value: 'option2',
                    label: '搜索订单',
                }
        ]
        //菜单跳转
        let goto = function(path:number):void{
            let toPath = '';
            if(path==0){
                toPath = '/home/first'
            }else if(path==1){
                toPath = '/home/warehouse'
            }else if(path==2){
                toPath = '/home/order'
            }
           router.push({path:toPath}) 
        } 
        //登出
        function loginOut(){
            store.dispatch('setLoginState',0)
            localStorage.removeItem("TOKEN");
            store.dispatch('setToken','')
            store.dispatch('setUserId','')
            router.push('/login')
        }
        function handleCommand(command:string){
            if(command=='first'){
                goto(0)
            }else if(command=='warehouse'){
                goto(1)
            }else if(command=='order'){
                goto(2)
            }else if(command=='loginout'){
                loginOut()
            }else if(command=='chat'){
                dialogVisible.value=true
            }
        }
        return {
            options,
            searchOption,
            Search,
            searchInput,
            handleCommand,
            dialogVisible
        }
    }
}
</script>

<style lang='less' scoped>
    .topWrapper{
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: rgba(0,0,0,0.7);
        position: relative;
        .searchinput{
            width: 150px;
            height: 4.5vh;
            /deep/ .el-input__inner{
                height: 4.5vh;
                padding-left:30px ;
            }
        }
        .searchSel{
            width: 110px;
            height: 4.5vh;
            /deep/ .el-input__inner{
                height: 4.5vh;
            }
        }
        .dropDown{
            position:absolute;
            right: 10px;
            @media (min-width:981px) {
                display: none;
            }
            .dd{
                font-size: 24px;
                color: white;
            }
        }
    }
</style>